<template>
  <div class="page">
    <div class="page-item">
      <div class="page-title">selectTable 功能验证：</div>
      <div class="page-flex">
        <label>disabled功能验证：</label>
        <ekRadio
          v-model="fromtest.disabled"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
          @change="changeRadio"
        />
      </div>
      <div class="page-flex">
        <label>clearable功能验证：</label>
        <ekRadio
          v-model="fromtest.clearable"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>autoInit功能验证：</label>
        <ekRadio
          v-model="fromtest.autoInit"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>multiple功能验证：</label>
        <ekRadio
          v-model="fromtest.multiple"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>collapseTags功能验证：</label>
        <ekRadio
          v-model="fromtest.collapseTags"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>测试网络差环境下情况：</label>
        <el-button @click="testne()" class="mt-btn">测试</el-button>
      </div>
      <div class="page-flex">
        <label>切换options数据功能验证：</label>
        <el-button @click="testData(1)" class="mt-btn">清空数据</el-button>
        <el-button @click="testData(2)" class="mt-btn">数据1</el-button>
        <el-button @click="testData(3)" class="mt-btn">数据2</el-button>
      </div>
      <div class="page-flex">
        <label>placeholder功能验证：</label>
        <ekInput v-model="fromtest.placeholder" />
      </div>
      <div class="page-flex mt-btn">
        <label>change功能验证：{{ fromtest.change }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>blur功能验证：{{ fromtest.blur }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>focus功能验证：{{ fromtest.focus }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>input功能验证：{{ fromtest.input }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>clear功能验证：{{ fromtest.clear }}</label>
      </div>
    </div>
    <div class="page-item">
      <div style="width: 200px">
        <ekTableSelect
          v-if="show"
          v-model="form.input"
          :placeholder="fromtest.placeholder"
          :disabled="fromtest.disabled"
          :clearable="fromtest.clearable"
          :autoInit="fromtest.autoInit"
          :multiple="fromtest.multiple"
          :collapseTags="fromtest.collapseTags"
          :layoutData="fromtest.layoutData"
          :mapping="{
            label: ['manage_account'],
            value: 'id',
          }"
          @change="change"
          @blur="blur"
          @focus="focus"
          @clear="clear"
        />
        <ekTableSelect
          v-if="show"
          v-model="form.input"
          :placeholder="fromtest.placeholder"
          :disabled="fromtest.disabled"
          :clearable="fromtest.clearable"
          :autoInit="fromtest.autoInit"
          :multiple="false"
          :collapseTags="fromtest.collapseTags"
          :layoutData="fromtest.layoutData"
          :mapping="{
            label: ['manage_account'],
            value: 'id',
          }"
          @change="change"
          @blur="blur"
          @focus="focus"
          @clear="clear"
        />
      </div>
      <!-- <div class="mt-btn">
            <ekSelect 
                v-model="form.input2" 
                :disabled="fromtest.disabled" 
                :clearable="fromtest.clearable"
                :autoInit="fromtest.autoInit"
                :multiple="fromtest.multiple"
                :collapseTags="fromtest.collapseTags"
                :options="options"
                @change="change"
                @blur="blur"
                @focus="focus"
                @clear="clear"
            />
        </div>
        <formRender :form="form" :columns="columns" ref="forms"
            @change="change"
            @blur="blur"
            @focus="focus"
            @clear="clear"
        /> -->
      <el-button @click="test" class="mt-btn">测试</el-button>
    </div>
  </div>
</template>

<script setup>
import {
  defineComponent,
  onMounted,
  getCurrentInstance,
  reactive,
  ref,
} from "vue";
import formRender from "@/components/form/formRender.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekTableSelect from "@/components/form/ekTableSelect/index.vue";


let fromtest = ref({
  disabled: false,
  clearable: true,
  placeholder: "",
  autoInit: false,
  collapseTags: true,
  multiple: true,
  blur: "",
  change: "",
  focus: "",
  input: "",
  clear: "",
  layoutData: {
    modelCode: "MODEL_DEMO",
    config: {
      listUrl: `/admin/basis/getList?modelCode=MODEL_DEMO`,
      pageOn: true,
      searchOn: true,
      operateOn: false, //开启操作区域
      treeOn: false, // 开启左边树
      treePropsOn: false, // 开启表格树形属性
      reserveSelection: true, // 保持选中行
    },
    searchs: [
      {
        type: "Input",
        column: "manage_account",
        label: "管理员账户",
      },
      {
        type: "Select",
        column: "manage_state",
        label: "状态",
        autoInit: false,
        url: "/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
      },
      {
        type: "DatePicker",
        column: "ctime",
        label: "创建日期",
      },
    ],
    pages: {
      pageSize: 20,
      orders: [
        {
          field: "id",
          sort: "desc",
        },
      ],
    },
    buttons: [
      {
        type: "add",
        text: "新增",
        config: {
          // 标题
          // title: "新增",
          // 新增成功后是否自动刷新
          autoReload: true,
          // 打开模型编码
          modelCode: "MODEL_DEMO",
          // 表单配置接口，没有配置走标准接口
          formUrl: ``,
          // 表单新增接口，没有配置走标准接口
          addUrl: ``,
          // 表单保存接口，没有配置走标准接口
          saveUrl: ``,
          // 回调
          callback: ' console.log("add回调了", row, rows); done();',
          // callback: ({row, rows, done}) => {
          //   console.log("add回调了", row, rows);
          //   done();
          // },
        },
      },
      {
        type: "delete",
        icon: "",
        text: "删除",
        config: {
          // 打开模型编码
          modelCode: "MODEL_DEMO",
          // 表单配置接口，没有配置走标准接口
          deleteUrl: ``,
          // 回调
          callback: ({ row, rows, done }) => {
            console.log("delete回调了", row, rows);
            done();
          },
        },
      },
      {
        type: "import",
        icon: "",
        text: "导入",
      },
      {
        type: "export",
        icon: "",
        text: "导出",
        config: {
          // 打开模型编码
          modelCode: "MODEL_DEMO",
          // 表单配置接口，没有配置走标准接口
          exportUrl: ``,
          // 回调
          callback: () => {
            console.log("export回调了");
          },
        },
      },
      // 自定义js
      {
        type: "customJs",
        icon: "",
        text: "自定义js",
        config: {
          // 回调
          callback: ({ row, rows, done }) => {
            console.log("customJs回调了", refList.value.getSelectionRows());
            // 执行自定义js 操作
            $ekMessage.success("执行了自定义js");
          },
        },
      },
      // 自定义组件
      {
        type: "customComponents",
        icon: "",
        text: "自定义组件",
        config: {
          // 标题
          title: "自定义组件",
          // 组件
          component: "demo/components/MyAdd",
          autoReload: true,
          autoClose: true,
          // 回调
          callback: ({ row, rows, done }) => {
            console.log("custom回调了", row, rows);
            done();
          },
        },
      },
    ],
    columns: [
      { type: "radio" },
      {
        label: "管理员ID",
        column: "id",
        sortable: "custom",
        display: "detail",
        config: {
          // 打开模型编码
          modelCode: "MODEL_DEMO",
          // 表单配置接口，没有配置走标准接口
          detailUrl: ``,
        },
      },
      {
        label: "管理员账户",
        column: "manage_account",
        sortable: "custom",
        display: "text",
      },
      {
        label: "创建时间",
        column: "ctime",
        format: "datetime",
        display: "text",
      },
      {
        label: "状态",
        column: "manage_state_dim_text",
        display: "state",
        config: {
          backgroundColor: ({ row }) => {
            if (row.manage_state == 1) {
              return "#67c23a";
            } else if (row.manage_state == 0) {
              return "#f56c6c";
            }
          },
        },
      },

    ],
    trees: {
      modelCode: "MODEL_DEPARTMENT",
      url: `/admin/basis/getTree?modelCode=MODEL_DEPARTMENT`,
      // 映射后端字段, 接口返回数据和标准格式映射取值，此处转换是前端把数组转换成树，是否做后端树接口兼容处理todo
      fieldMapping: {
        label: "department_name",
        id: "id",
        parentId: "parent_id",
      },
      // 左侧数据映射到列表查询条件
      searchMapping: [
        {
          bracket: "(",
          type: "bracket",
        },
        {
          // 来源字段
          sourceField: "id",
          // 目标字段
          targetField: "department_id",
          // 符号
          symbol: "eq",
        },
        {
          bracket: ")",
          type: "bracket",
        },
      ],
      // 树组件一些配置项todo
      config: {},
    },
  },
});
let form = reactive({
  input: [],
  input2: "input2",
  input3: "",
});

let columns = ref([
  {
    type: "Select",
    column: "input3",
    label: "input3",
    disabled: false,
    clearable: false,
    placeholder: "",
    url: "/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    rules: [{ required: true, message: "Input所有参数验证", trigger: "blur" }],
    mapping: {
      value: "dimension_code",
      label: ["dimension_code", "dimension_name"],
    },
  },
]);
const forms = ref(null);
const test = () => {
  console.log(form);
  forms.value.validate(() => {});
};

const options = ref([
  {
    value: "success",
    label: "success",
  },
  {
    value: "fail",
    label: "fail",
  },
  {
    value: "error",
    label: "error",
  },
]);
const testData = (type) => {
  if (type == 2) {
    options.value = [
      {
        value: "success",
        label: "success",
      },
      {
        value: "fail",
        label: "fail",
      },
      {
        value: "error",
        label: "error",
      },
    ];
  } else if (type == 3) {
    options.value = [
      {
        value: "1",
        label: "1",
      },
      {
        value: "2",
        label: "2",
      },
      {
        value: "3",
        label: "3",
      },
    ];
  } else {
    options.value = [];
  }
};

const changeRadio = () => {
  columns.value[0].disabled = fromtest.value.disabled;
};
// 失去焦点
const blur = (event) => {
  fromtest.value.blur = "blur事件:" + JSON.stringify(event);
  console.log(event, "blur");
};
// 聚焦
const focus = (event) => {
  fromtest.value.focus = "focus事件:" + JSON.stringify(event);
  console.log(event, "focus");
};
// 改变事件
const change = (event) => {
  fromtest.value.change = "change事件:" + JSON.stringify(event);
  console.log(event, "change");
};

// 实时改变事件
const clear = () => {
  fromtest.value.clear = "clear事件";
  console.log("clear");
};
console.log(JSON.stringify(fromtest.value))

const show = ref(true);
const testne = () => {
  show.value = false;
  setTimeout(() => {
    show.value = true;
  }, 1000);
};
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
  display: flex;
  .page-item {
    border: 1px solid #fff;
    padding: 10px;
    margin: 10px;
  }
  .page-title {
    font-size: 16px;
  }
  .page-flex {
    display: flex;
    align-items: center;
  }
  .mt-btn {
    margin-top: 10px;
  }
}
</style>
